<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%@include file="../common/include.jsp" %>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

</head>

<body>


<div class="row" style="margin:15px">
    <div class="col-md-6  " style="    padding-left: 1px;">


        <div class="panel panel-default">
            <div class="panel-heading">密码修改</div>
            <div class="panel-body">

                <form class="form-horizontal" id="updateUserForm" name="updateUserForm">

                    <div class="form-group" style="margin-top:10px">
                        <label for="password" class="col-sm-2 control-label">原始密码 :</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="password" name="password"
                                   maxlength="18" placeholder="请输入原始密码" type="password">
                        </div>
                    </div>

                    <div class="form-group" style="margin-top:10px">
                        <label for="password" class="col-sm-2 control-label">新密码 :</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="newPassword" name="newPassword"
                                   maxlength="18" placeholder="长度在6-18之间">
                        </div>
                    </div>

                    <div class="form-group" style="margin-top:10px">
                        <label for="password" class="col-sm-2 control-label">确认密码 :</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="checkPassword" name="checkPassword"
                                   maxlength="18" placeholder="请确认密码">
                        </div>
                    </div>

            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-primary   col-sm-4" id="submitBtn">保&nbsp;&nbsp;存</button>
            </div>
        </div>
        </form>

    </div>
</div>


</div>
</div>


<script>
    $(document).ready(function () {
        $("#updateUserForm").validate({

            rules: {

                password: {
                    required: true
                },
                newPassword: {
                    required: true,
                    minlength:6
                },
                checkPassword: {
                    required: true,
                    equalTo: "#newPassword"
                }

            },
            messages: {
                password: {
                    required: '请填写原始密码'
                },

                newPassword: {
                    required: '请填写新密码',
                    minlength:'密码最少6位'
                },
                checkPassword: {
                    required: '请确实密码',
                    equalTo:'2次密码不一致'
                }
            }
        });
    });



    //按钮先执行验证再提交表单
    $("#submitBtn").click(function () {
        if ($("#updateUserForm").valid()){

            var newPassword = $("#newPassword").val();
            var checkPassword = $("#checkPassword").val();
            var password = $("#password").val();

            var args = {
                "password": password,
                "newPassword": newPassword
            }

            var url = "updatePass.html";


            //加载进度条
            layer.load(2, {
                shade: [0.2, '#999999'] //0.1透明度的白色背景
            });
            $.post(url, args, function (data) {
                data = jQuery.parseJSON(data);
                //保存成功
                if (data.code == 1) {
                    layer.alert(data.msg);
                    layer.closeAll('loading');
                    $("#updateUserForm")[0].reset();

                } else {
                    //失败
                    layer.alert(data.msg);
                    layer.closeAll('loading');
                }
            });

        }
    });

</script>
</body>
</html>
